<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
</head>
<body>
<div id="root">

</div>

</body>
<script type="text/babel">
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    const data = [
        {
            type:"男生爱读",
            bookList:[
                {
                    id:1,
                    bookName:"一念永恒"
                },{
                    id:2,
                    bookName: "吞噬星空"
                }
            ]
        },
        {
            type:"女生必看",
            bookList:[
                {
                    id:3,
                    bookName:"霸道总裁爱上我"
                },{
                    id:4,
                    bookName: "赘婿"
                }
            ]
        }
    ]
    const BookInfo = function({info}){
        return (
            <div>
                <h3>{info.type}</h3>
                {
                    info.bookList.map(item=>(
                        <p key={item.id}>{item.bookName}</p>
                    ))
                }
                <hr/>
            </div>
       )
    }
    root.render((
        <>
            {
                data.map((item,index)=>(
                    <BookInfo key={index} info={item}/>
                ))
            }
        </>


    ))
</script>
</html>